<template>
    <!-- 导航栏 -->
    <van-nav-bar
        :title="TypeName"
        left-text="返回"
        left-arrow
        fixed
        placeholder
        z-index="1000"
        @click-left="OnBack"
        @click-right="SearchShow = true"
    >
        <template #right>
            <van-icon name="search" size="20" />
        </template>
    </van-nav-bar>

    <!-- 搜索框 -->
    <van-popup v-model:show="SearchShow" position="top">
        <van-search v-model="keywords" placeholder="请输入关键词" @search="OnSearch" />
    </van-popup>

    <!-- 下拉菜单 -->
    <van-sticky :offset-top="46">
        <van-dropdown-menu>
            <van-dropdown-item @change="OnTypeToggle" v-model="TypeActive" :options="TypeList" />
            <van-dropdown-item @change="OnFlagToggle" v-model="FlagActive" :options="FlagList" />
            <van-dropdown-item @change="OnSortToggle" v-model="SortActive" :options="SortList" />
            <van-dropdown-item @change="OnByToggle" v-model="ByActive" :options="ByList" />
        </van-dropdown-menu>
    </van-sticky>

    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="OnRefresh">
        <!-- 加载列表 -->
        <van-list
            v-model:loading="loading"
            :finished="finished"
            :offset="10"
            finished-text="没有更多了"
            @load="OnLoad"
        >
            <div class="list">
                <div class="item" v-for="item in list" :key="item.id">
                    <router-link :to="{path:'/product/info',query:{proid:item.id}}">
                        <div class="thumb">
                            <van-image
                                width="100%"
                                height="150px"
                                fit="cover"
                                :src="item.thumb_text"
                            />
                        </div>
                        <div class="name">{{ item.name }}</div>
                        <div class="box">
                            <div class="price">
                                <span v-if="item.live_price > 0">￥{{ item.live_price }}</span>
                                <span :class="item.live_price ? 'product_price' : ''">￥{{ item.price }}</span>
                            </div>
                            <div class="buy-count">{{ item.buy_count }}人付款</div>
                        </div>
                        <div class="box">
                            <div class="region">{{ item.region_text }}</div>
                            <div class="chat"><van-icon name="chat-o" color="#ff5000" size="16" /></div>
                        </div>

                    </router-link>
                </div>
            </div>
        </van-list>
    </van-pull-refresh>

    <!-- 返回顶部 -->
    <van-back-top />
</template>

<script setup>
const { proxy } = getCurrentInstance();

// 控制是否显示搜索框
const SearchShow = ref(false);
// 导航栏的标题
const TypeName = ref('全部分类');
// 关键字
const keywords = ref('');

// 下拉菜单的数据
const FlagList = [
    {text: '全部商品', value: '0'},
    {text: '新品', value: '1'},
    {text: '热销', value: '2'},
    {text: '推荐', value: '3'},
];
const SortList = [
    {text: '按上架时间', value: 'createtime'},
    {text: '按价格', value: 'price'},
    {text: '按库存', value: 'stock'}
];
const ByList = [
    {text: '降序', value: 'desc'},
    {text: '升序', value: 'asc'},
];
// 商品分类数据
const TypeList = reactive([
    {text: '全部分类', value: '0'},
]);

// 从分类页面传过来的分类id
const TypeActive = ref(proxy.$route.query.typeid ?? '0');
// 1-新品 2-热销 3-推荐
const FlagActive = ref('0');
// 排序 上架时间 价格 库存
const SortActive = ref('createtime');
// desc 降序 asc 升序
const ByActive = ref('desc');

// 下拉刷新状态
const refreshing = ref(false);
// 懒加载状态
const loading = ref(false);
// 上拉加载结束状态
const finished = ref(false);
// 商品数据
const list = ref([]);
// 当前页
const page = ref(1);

// 生命周期 - 挂载前
onBeforeMount(() => GetTypeData());

// 下拉刷新的回调函数
const OnRefresh = () =>
{
    page.value = 1;
    list.value = [];
    finished.value = false;
    loading.value = true;
    refreshing.value = true;

    setTimeout(OnLoad,1500);
}

// 上拉加载回调函数
const OnLoad = async () =>
{
    if(refreshing.value === true)
    {
        refreshing.value = false;
    }

    let params = {
        typeid:TypeActive.value,
        flag:FlagActive.value,
        sort:SortActive.value,
        by:ByActive.value,
        keywords:keywords.value,
        page:page.value
    }

    let result = await proxy.$http.post({
        url:'/product/index',
        params
    })

    loading.value = false;

    if(result.code === 1)
    {
        // 获取数据总数
        let count = result.data ? result.data.count : 0;
        // 获取数据并且合并数组
        list.value = result.data ? list.value.concat(result.data.list) : [];

        // 判断是否加载完所有数据
        if(list.value.length >= count)
        {
            finished.value = true;

            return false;
        }

        page.value = page.value + 1;
    }else{
        finished.value = true;
    }
}

const OnTypeToggle = () =>
{
    OnRefresh();
    
    TypeList.map(item => {
        if(item.value == TypeActive.value)
        {
            TypeName.value = item.text;
        }
    })
}

const OnFlagToggle = () =>
{
    OnRefresh();
}

const OnSortToggle = () =>
{
    OnRefresh();
}

const OnByToggle = () =>
{
    OnRefresh();
}

// 关键字搜索事件
const OnSearch = () =>
{
    OnRefresh();
}

// 获取商品分类数据
const GetTypeData = async () =>
{
    let result = await proxy.$http.post({
        url:'/product/type'
    })

    if(result.code === 1)
    {
        for(let item of result.data)
        {
            TypeList.push({
                text:item.name,
                value:item.id.toString()
            })

            if(item.id == TypeActive.value)
            {
                TypeName.value = item.name;
            }
        }
    }
}

// 返回上一页
const OnBack = () => proxy.$router.back();
</script>

<style scoped>
@import url('/assets/css/ProductIndex.css');
</style>